.bui-badge-position() {
  top: var(--badge-position);
  right: var(--badge-position);
  transform: scale(1) translate(50%, -50%);
}
.bui-badge-bubble-radius() {
  border-radius: var(--bubble-border-radius);
}

.bui-badge {
  --badge-position: var(--bui-badge-position, 14%);
  --min-width: var(--bui-badge-min-width, 15px);
  --height: var(--bui-badge-height, 15px);
  --line-height: var(--bui-badge-line-height, 15px);
  --padding: var(--bui-badge-padding, 0 3px);
  --border-radius: var(--bui-badge-border-radius, 8px);
  --outlined-padding: var(--bui-badge-outlined-padding, 0 2px);
  --dot-size: var(--bui-badge-dot-size, 9px);
  --bubble-padding: var(--bui-badge-bubble-padding, 0 5px);
  --bubble-border-radius: var(--bui-badge-bubble-border-radius, 6px 6px 6px 0);

  display: inline-block;
  font-family: var(--bui-font-family);

  &-position {
    position: relative;

    .bui-badge-contained,
    .bui-badge-outlined {
      position: absolute;
      .bui-badge-position();
    }

    .bui-badge-dot {
      .bui-badge-position();
    }

    .bui-badge-bubble {
      .bui-badge-position();
    }
  }

  &-contained,
  &-outlined {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: var(--min-width);
    height: var(--height);
    line-height: var(--line-height);
    padding: var(--padding);
    font-size: var(--bui-text-size-4);
    border-radius: var(--border-radius);
    color: var(--bui-color-bg-view);
    white-space: nowrap;
    z-index: 1;
  }

  &-outlined {
    padding: var(--outlined-padding);
  }

  &-primary {
    background-color: var(--bui-color-primary);
  }

  &-success {
    background-color: var(--bui-color-success);
  }

  &-info {
    background-color: var(--bui-color-info);
  }

  &-warning {
    background-color: var(--bui-color-warning);
  }

  &-danger {
    background-color: var(--bui-color-danger);
  }

  &-dot {
    width: var(--dot-size);
    min-width: 0;
    height: var(--dot-size);
    padding: 0;
    border-radius: 100%;
  }

  &-bubble {
    .bui-badge-bubble-radius();
    padding: var(--bubble-padding);
  }

  &-outlined {
    background: var(--bui-color-bg-view);
  }

  &-outlined&-primary {
    border: 1px solid var(--bui-color-primary);
    color: var(--bui-color-primary);
  }

  &-outlined&-success {
    border: 1px solid var(--bui-color-success);
    color: var(--bui-color-success);
  }

  &-outlined&-info {
    border: 1px solid var(--bui-color-info);
    color: var(--bui-color-info);
  }

  &-outlined&-warning {
    border: 1px solid var(--bui-color-warning);
    color: var(--bui-color-warning);
  }

  &-outlined&-danger {
    border: 1px solid var(--bui-color-danger);
    color: var(--bui-color-danger);
  }

  &-outlined&-bubble {
    .bui-badge-bubble-radius();
  }
}
